<template>
	<el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="查看二维码" width="600px">
		<div class="loadSignImages-container">
			<Qrcode :value="`http://124.70.178.58:8195/fruitDetail?id=${value}`" size="200" id="canvasDom"></Qrcode>	
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="handleDownLoad">下载二维码</el-button>
				<el-button @click="dialogVisible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup>
import Qrcode from '@/components/Qrcode'
import { computed } from 'vue'
const emit = defineEmits(['update:visible'])
const props = defineProps({
	visible: { type: Boolean, default: false },
	value: { type: String, default: '' },
});
const dialogVisible = computed({
	get: () => {
		return props.visible;
	},
	set: (nv) => {
		emit('update:visible', nv)
	},
});
const handleDownLoad = ()=>{
	const canvas = document.getElementById('canvasDom')
    const url = canvas.toDataURL("image/png") // 通过 toDataURL 返回一个包含图片展示的 data URI 
    const aDom = document.createElement("a")
    aDom.download = '二维码图片'// 设置下载的文件名
    aDom.href = url
    document.body.appendChild(aDom)
    aDom.click()
    aDom.remove()
}
</script>
<style scoped lang='scss'>
@import './index.scss'
</style>
